<template>
  <div>
    <div v-if="tabs && tabs.items" class="page-menu-tabs">
      <a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
        <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"> </a-tab-pane>
      </a-tabs>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'NoteLayout',
  data() {
    return {
      tabs: {
        items: [
          {
            key: '1',
            title: '短信速送',
          },
          {
            key: '2',
            title: '速递历史',
          },
        ],
        active: () => {
          switch (this.$route.path) {
            case '/modules/note':
              return '1'
            case '/modules/note/history':
              return '2'
            default:
              return '1'
          }
        },
        callback: (key) => {
          switch (key) {
            case '1':
              this.$router.push('/modules/note')
              break
            case '2':
              this.$router.push('/modules/note/history')
              break
            default:
              return '1'
          }
        },
      },
      search: true
    }
  },
}
</script>

<style lang="less" scoped>
.page-menu-tabs {
  background-color: #fff;
  padding: 0 24px;
}
.search-content {
  margin-top: 0;
}
</style>